<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>市场数据分析</title>
    <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0,maximum-scale=1.0,user-scalable=no;">
    <link rel="stylesheet" type="text/css" href="view/iwocar5/css/main.css" />
	<script src="view/iwocar5/js/jquery-1.11.1.min.js"></script>
</head>
<body>
<!--    <div class="header">
        <h5>市场总监<i class="arrow_l1"></i><em class="arrow_l2"></em></h5>
    </div>-->

    
    <div class="form-bar">
        <h3 class="pub-title">
            <span>集客比</span>
            <div>
                <span><i class="arrow_b"></i></span>
                <select id="jikebi">
                  <option selected = "selected">今天</option>
                  <option>本周</option>
				  <option>本月</option>
				  <option>今年</option>
                </select>
            </div>
        </h3>
        <div class="form-border">
            <div class="focusClient-form" id="focusClient1-form"></div>
        </div>
    </div>         
    <div class="form-bar">
        <h3 class="pub-title">
            <span>同区集客对比</span>
            <div>
                <!--<span><i class="arrow_b"></i></span>
                <select id="tqjike">
                  <option selected = "selected">今天</option>
                  <option>本周</option>
				  <option>本月</option>
				  <option>今年</option>
                </select>-->
            </div>
        </h3>
        <div class="form-border">
            <div class="focusClient-form" id="focusClient3-form"></div>
        </div>
    </div>      
    <div class="form-bar">
        <h3 class="pub-title">
            <span>全国集客对比</span>
            <div>
                <!--<span><i class="arrow_b"></i></span>
                <select>
                  <option selected = "selected">今天</option>
                  <option>本周</option>
				  <option>本月</option>
				  <option>今年</option>
                </select>-->
            </div>
        </h3>
        <div class="form-border">
            <div class="focusClient-form" id="focusClient4-form"></div>
        </div>
    </div>  
    <div class="form-pie">
        <h3 class="pub-title">
            <span>成交因素比</span>
        </h3>
        <div class="form-border">
            <h3 class="form-title">
                <p>进店频次</p>
            </h3>
            <div class="volume-from" id="volume1-from"></div>
            <h5 class="graph-title">
                <span>一次</span>
                <span>两次</span>     
                <span>三次</span>
                <span>三次以上</span>             
            </h5>
        </div>
        <div class="form-border">
            <h3 class="form-title">
                <p>进店周期</p>
            </h3>
            <div class="volume-from" id="volume2-from"></div>
            <h5 class="graph-title">
                <span>一月内</span>
                <span>三月内</span>     
                <span>五月内</span>             
            </h5>
        </div>
        <div class="form-border" style="display:none">
            <h3 class="form-title">
                <p>活动参与情况</p>
            </h3>
            <div class="volume-from" id="volume3-from"></div>
            <h5 class="graph-title">
                <span>参与</span>
                <span>未参与</span>     
                <span>参与两次以上</span>    
            </h5>
        </div>
    </div>

    <div class="form-pie" style="display:none">
        <h3 class="pub-title">
            <span>成交用户精准画像</span>
        </h3>
        <div class="form-border">
            <div class="volume-from" id="volume4-from"></div>
            <h5 class="graph-title spec">
                <span>商务达人</span>
                <span>运动达人</span>     
                <span>金融人士</span><br />
                <span>公务员</span>  
                <span>专业人士</span>  
                <span>社交达人</span>             
            </h5>
        </div>
    </div>
    <div class="form-pie" style="display:none">
        <h3 class="pub-title">
            <span>活动喜好度</span>
        </h3>
        <div class="form-border">
            <div class="volume-from" id="volume5-from"></div>
            <h5 class="graph-title">
                <span>车友会</span>
                <span>音乐会</span>     
                <span>户外野营</span>           
            </h5>
        </div>
    </div>
    <div class="form-pie" style="display:none">
        <h3 class="pub-title">
            <span>浏览喜好度</span>
        </h3>
        <div class="form-border">
            <div class="volume-from" id="volume6-from"></div>
            <h5 class="graph-title">
                <span>视频</span>
                <span>新闻</span>     
                <span>汽车</span>    
				<span>其它</span>  				
            </h5>
        </div>
    </div>

<script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
    <script type="text/javascript">
        // 路径配置
        require.config({
            paths: {
                echarts: 'http://echarts.baidu.com/build/dist'
            }
        });
        
        // 使用
        require(
            [
                'echarts',
                'echarts/chart/bar' // 使用柱状图就加载bar模块，按需加载
            ],
            function (ec) {
                // 基于准备好的dom，初始化echarts图表
                var myChart = ec.init(document.getElementById('focusClient1-form')); 
                
                var option = {
                    calculable : false,
                    xAxis : [
                        {
                            type : 'category',
                            data : ['今天','昨天'],
                            axisLine: {lineStyle: {color: '#EEEEEE'}},
                            splitLine : {
                                show : false,
                            },
                        }
                    ],
                    yAxis : [
                        {
                            type : 'value',
                            scale : true,
                            axisLine: {lineStyle: {color: '#EEEEEE'}},
                        }
                    ],
                    series : [
                        {
                            // name:'蒸发量',
                            type:'bar',
                            barCategoryGap : '80%',
                            itemStyle: {
                                normal: {
                                    color: '#434c53',
                                    label : {
                                        show: true, position: 'top',
                                        textStyle:{
                                            color : '#000',
                                        }
                                    }
                                }
                            },
                            data:[<?php echo $allday?>,<?php echo $yesdallday?>]
                        }
                    ],
                    grid : {
                        x : '20%',
                        y : '15%',
                        x2 : '10%',
                        y2 : '20%'
                    }
                };
        $("#jikebi").change(function(){
                        var flow_time=$("#jikebi").children('option:selected').val();
                        if(flow_time=="今天"){
                            option.xAxis[0].data = ['今天','昨天'];
                            option.series[0].data = [<?php echo $allday?>,<?php echo $yesdallday?>];
                            //console.log(sx);
                            option.series[0].barCategoryGap='80%';
                            myChart.clear();
                            myChart.hideLoading();
                            myChart.setOption(option);
                        }
                        if(flow_time=="本周"){
                            option.xAxis[0].data = ['一','二','三','四','五','六','日'];
                            option.series[0].data = [
                            
                            <?php echo $onejk?>,
                            <?php echo $twojk?>,
                            <?php echo $threejk?>,
                            <?php echo $fourjk?>,
                            <?php echo $fivejk?>,
                            <?php echo $sixjk?>,
                            <?php echo $sevenjk?>,];
                            option.series[0].barCategoryGap='50%';
                            //console.log(sx);
                            //console.log(sy);
                            myChart.clear();
                            myChart.hideLoading();
                            myChart.setOption(option);
                        }
                        if(flow_time=="本月"){
                            option.xAxis[0].data = ['第1周','第2周','第3周','第4周',];
                            option.series[0].data = [
                            <?php echo $firstjk?>,
                            <?php echo $secondjk?>,
                            <?php echo $thirdjk?>,
                            <?php echo $fourthjk?>,];
                            option.series[0].barCategoryGap='60%';
                            //console.log(sx);
                            //console.log(sy);
                            myChart.clear();
                            myChart.hideLoading();
                            myChart.setOption(option);
                        }
                        if(flow_time=="今年"){
                            option.xAxis[0].data = ['第一季度','第二季度','第三季度','第四季度',];
                            option.series[0].data = [
                            <?php echo $firstmonthjk?>,
                            <?php echo $secondmonthjk?>,
                            <?php echo $thirdmonthjk?>,
                            <?php echo $fourthmonthjk?>,];
                            option.series[0].barCategoryGap='60%';
                            //console.log(sx);
                            //console.log(sy);
                            myChart.clear();
                            myChart.hideLoading();
                            myChart.setOption(option);
                        }


                })
                // 为echarts对象加载数据 
                myChart.setOption(option); 
                window.onresize = myChart.resize;
            }
        );
    
        // 使用
        require(
            [
                'echarts',
                'echarts/chart/bar' // 使用柱状图就加载bar模块，按需加载
            ],
            function (ec) {
                // 基于准备好的dom，初始化echarts图表
 
/**同区集客对比 */				
				var myChart = ec.init(document.getElementById('focusClient3-form')); 
                
                var option = {
                    calculable : false,
                    xAxis : [
                        {
                            type : 'category',
                            data : ['4S店最大值','4S店最小值','大区平均值'],
                            axisLine: {lineStyle: {color: '#EEEEEE'}},
                            splitLine : {
                                show : false,
                            },
                        }
                    ],
                    yAxis : [
                        {
                            type : 'value',
                            scale : true,
                            axisLine: {lineStyle: {color: '#EEEEEE'}},
                        }
                    ],
                    series : [
                        {
                            // name:'蒸发量',
                            type:'bar',
                            barCategoryGap : '70%',
                            itemStyle: {
                                normal: {
                                    color: '#434c53',
                                    label : {
                                        show: true, position: 'top',
                                        textStyle:{
                                            color : '#000',
                                        }
                                    }
                                }
                            },
                            data:[<?php echo $allday?>,<?php echo $allday?>,<?php echo $allday?>]
                        }
                    ],
                    grid : {
                        x : '20%',
                        y : '15%',
                        x2 : '10%',
                        y2 : '20%'
                    }
                };
				$("#tqjike").change(function(){
						var flow_time=$("#tqjike").children('option:selected').val();
						if(flow_time=="今天"){
								option.xAxis[0].data =['4S店最大值','4S店最小值','大区平均值'];
                            data:[<?php echo $allday?>,<?php echo $allday?>,<?php echo $allday?>]
								//console.log(sx);
								myChart.clear();
								myChart.hideLoading();
								myChart.setOption(option);
							}
						if(flow_time=="本周"){
							$.post("Area_Ajax.php",{act:'tqjike_thisweek'},function(data){
								//console.log(data);
								var d=eval('('+data+')');
								var sx=new Array(),sy=new Array(),i=0;
								/*for(var k in d){  
									sx[i]=k;
									sy[i]=d[k];
									i++;
								}*/
								option.xAxis[0].data =['4S店最大值','4S店最小值','大区平均值'];
								//option.series[0].data = sy;
                                option.series[0].data = [<?php echo $allweekjk?>,<?php echo $allweekjk?>,<?php echo $allweekjk?>];
								console.log(d);
								console.log(sy);
								myChart.clear();
								myChart.hideLoading();
								myChart.setOption(option);
							})
						}
						if(flow_time=="本月"){
							$.post("Area_Ajax.php",{act:'tqjike_thismonth'},function(data){
								//console.log(data);
								var d=eval('('+data+')');
								var sx=new Array(),sy=new Array(),i=0;
								for(var k in d){  
									sx[i]=k;
									sy[i]=d[k];
									i++;
								}
								
								option.xAxis[0].data =['4S店最大值','4S店最小值','大区平均值'];
                                option.series[0].data =[<?php echo $allmonthjk?>,<?php echo $allmonthjk?>,<?php echo $allmonthjk?>];
								console.log(sx);
								console.log(sy);
								myChart.clear();
								myChart.hideLoading();
								myChart.setOption(option);
							})
						}
						if(flow_time=="今年"){
							$.post("Area_Ajax.php",{act:'tqjike_thisyear'},function(data){
								//console.log(data);
								var d=eval('('+data+')');
								var sx=new Array(),sy=new Array(),i=0;
								for(var k in d){  
									sx[i]=k;
									sy[i]=d[k];
									i++;
								}
								
								option.xAxis[0].data =['4S店最大值','4S店最小值','大区平均值'];
                                option.series[0].data = [<?php echo $allyearjk?>,<?php echo $allyearjk?>,<?php echo $allyearjk?>];
								console.log(sx);
								console.log(sy);
								myChart.clear();
								myChart.hideLoading();
								myChart.setOption(option);
							})
						}


				})
        
                // 为echarts对象加载数据 
                myChart.setOption(option); 
                window.onresize = myChart.resize;
            }
        );
        
        // 使用
        require(
            [
                'echarts',
                'echarts/chart/bar' // 使用柱状图就加载bar模块，按需加载
            ],
            function (ec) {
                // 基于准备好的dom，初始化echarts图表
                var myChart = ec.init(document.getElementById('focusClient4-form')); 
                
                var option = {
                    calculable : false,
                    xAxis : [
                        {
                            type : 'category',
                            data : ['最大值','最小值','大区平均值','全国平均值'],
                            axisLine: {lineStyle: {color: '#EEEEEE'}},
                            splitLine : {
                                show : false,
                            },
                        }
                    ],
                    yAxis : [
                        {
                            type : 'value',
                            scale : true,
                            axisLine: {lineStyle: {color: '#EEEEEE'}},
                        }
                    ],
                    series : [
                        {
                            // name:'蒸发量',
                            type:'bar',
                            barCategoryGap : '60%',
                            itemStyle: {
                                normal: {
                                    color: '#434c53',
                                    label : {
                                        show: true, position: 'top',
                                        textStyle:{
                                            color : '#000',
                                        }
                                    }
                                }
                            },
                            data:[<?php echo $maxjk?>,<?php echo $minjk?>,<?php echo $allday?>,<?php echo $daycountry?>]
                        }
                    ],
                    grid : {
                        x : '20%',
                        y : '15%',
                        x2 : '10%',
                        y2 : '20%'
                    }
                };
        
                // 为echarts对象加载数据 
                myChart.setOption(option); 
                window.onresize = myChart.resize;
            }
        );

        // 使用
        require(
            [
                'echarts',
                'echarts/chart/pie' // 加载pie模块，按需加载
            ],
            function (ec) {
                // 基于准备好的dom，初始化echarts图表
                var myChart = ec.init(document.getElementById('volume1-from')); 
                
                var option = {
                        color : ['#434c53',"#c00000",'#6d7578','#b1b6b9'],
                        series : [
                            {
                                type:'pie',
                                itemStyle : {
                                    normal : {
                                        label : {
                                            position : 'inner'
                                        },
                                        labelLine : {
                                            show : false
                                        }
                                    }
                                },
                                data:[
                                    {value:<?php echo $vone?>, name:"<?php echo $vone?>%"},
                                    {value:<?php echo $vtwo?>, name:'<?php echo $vtwo?>%'},
                                    {value:<?php echo $vthree?>, name:'<?php echo $vthree?>%'},
                                    {value:<?php echo $vmore?>, name:'<?php echo $vmore?>%'},
                                ]
                            }
                        ]
                    };
                    
        
                // 为echarts对象加载数据 
                myChart.setOption(option); 
                window.onresize = myChart.resize;
            }
        );

        // 使用
        require(
            [
                'echarts',
                'echarts/chart/pie' // 加载pie模块，按需加载
            ],
            function (ec) {
                // 基于准备好的dom，初始化echarts图表
                var myChart = ec.init(document.getElementById('volume2-from')); 
                
                var option = {
                        color : ["#c00000",'#434c53','#6d7578'],
                        series : [
                            {
                                type:'pie',
                                itemStyle : {
                                    normal : {
                                        label : {
                                            position : 'inner'
                                        },
                                        labelLine : {
                                            show : false
                                        }
                                    }
                                },
                                data:[
                                    {value:44, name:"44%"},
                                    {value:38, name:'38%'},
                                    {value:18, name:'18%'},
                                ]
                            }
                        ]
                    };
                    
        
                // 为echarts对象加载数据 
                myChart.setOption(option); 
                window.onresize = myChart.resize;
            }
        );

        // 使用
        require(
            [
                'echarts',
                'echarts/chart/pie' // 加载pie模块，按需加载
            ],
            function (ec) {
                // 基于准备好的dom，初始化echarts图表
                var myChart = ec.init(document.getElementById('volume3-from')); 
                
                var option = {
                        color : ["#c00000",'#434c53','#6d7578'],
                        series : [
                            {
                                type:'pie',
                                itemStyle : {
                                    normal : {
                                        label : {
                                            position : 'inner'
                                        },
                                        labelLine : {
                                            show : false
                                        }
                                    }
                                },
                                data:[
                                    {value:37, name:'37%'},
                                    {value:46, name:'46%'},
                                    {value:17, name:'17%'},
                                ]
                            }
                        ]
                    };
                    
        
                // 为echarts对象加载数据 
                myChart.setOption(option); 
                window.onresize = myChart.resize;
            }
        );

        // 使用
        require(
            [
                'echarts',
                'echarts/chart/pie' // 加载pie模块，按需加载
            ],
            function (ec) {
                // 基于准备好的dom，初始化echarts图表
                var myChart = ec.init(document.getElementById('volume4-from')); 
                
                var option = {
                        color : ['#c00000','#000',"#434c53",'#6d7578',"#b1b6b9",'#d5d9d8'],
                        series : [
                            {
                                type:'pie',
                                itemStyle : {
                                    normal : {
                                        label : {
                                            position : 'inner'
                                        },
                                        labelLine : {
                                            show : false
                                        }
                                    }
                                },
                                data:[
                                    {value:10, name:'10%'},
                                    {value:20, name:'20%'},
                                    {value:15, name:'15%'},
                                    {value:43, name:'30%'},
                                    {value:12, name:'12%'},
                                    {value:12, name:'13%'},
                                ]
                            }
                        ]
                    };
                    
        
                // 为echarts对象加载数据 
                myChart.setOption(option); 
                window.onresize = myChart.resize;
            }
        );

        // 使用
        require(
            [
                'echarts',
                'echarts/chart/pie' // 加载pie模块，按需加载
            ],
            function (ec) {
                // 基于准备好的dom，初始化echarts图表
                var myChart = ec.init(document.getElementById('volume5-from')); 
                
                var option = {
                        color : ["#c00000",'#434c53','#6d7578'],
                        series : [
                            {
                                type:'pie',
                                itemStyle : {
                                    normal : {
                                        label : {
                                            position : 'inner'
                                        },
                                        labelLine : {
                                            show : false
                                        }
                                    }
                                },
                                data:[
                                    {value:37, name:'37%'},
                                    {value:46, name:'46%'},
                                    {value:17, name:'17%'},
                                ]
                            }
                        ]
                    };
                    
        
                // 为echarts对象加载数据 
                myChart.setOption(option); 
                window.onresize = myChart.resize;
            }
        );
        // 使用
        require(
            [
                'echarts',
                'echarts/chart/pie' // 加载pie模块，按需加载
            ],
            function (ec) {
                // 基于准备好的dom，初始化echarts图表
                var myChart = ec.init(document.getElementById('volume6-from')); 
                
                var option = {
                        color : ["#c00000",'#434c53','#6d7578','#b1b6b9'],
                        series : [
                            {
                                type:'pie',
                                itemStyle : {
                                    normal : {
                                        label : {
                                            position : 'inner'
                                        },
                                        labelLine : {
                                            show : false
                                        }
                                    }
                                },
                                data:[
                                    {value:27, name:'27%'},
                                    {value:36, name:'36%'},
                                    {value:27, name:'27%'},
									{value:10, name:'10%'},
                                ]
                            }
                        ]
                    };
                    
        
                // 为echarts对象加载数据 
                myChart.setOption(option); 
                window.onresize = myChart.resize;
            }
        );

</script>
</body>
</html>